<template>
  <div>
    <el-menu router default-active="/home" class="el-menu-vertical-demo">
      <el-menu-item index="/home">
        <el-icon><Management /></el-icon>
        <span>首页</span>
      </el-menu-item>
      <el-sub-menu index="1">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item index="/menu">菜单管理</el-menu-item>
              <el-menu-item index="/role">角色管理</el-menu-item>
              <el-menu-item index="/member">管理员管理</el-menu-item>
            </el-sub-menu>

      <!-- <el-sub-menu v-for="item in store.getters.getUser.menus" :key="item.id" :value="item.id">
                              <template #title>
                                <el-icon><component :is="item.icon" /></el-icon>
                                <span>{{item.title}}</span>
                              </template>
                            
                                <el-menu-item v-for="menu in item.children" :key="menu.id" :index="menu.url">{{menu.title}}</el-menu-item>
                       
                                
                            </el-sub-menu> -->

      <!-- <el-sub-menu
        index="1"
        v-for="item in store.getters.getUser.menus"
        :key="item.id"
        :value="item.id"
      >
        <template #title>
          <el-icon><Star component:is="item.icon" /></el-icon>
          <el-icon><location /></el-icon>
          <span>{{ item.title }}</span>
        </template>

        <el-menu-item
          v-for="menu in item.children"
          :index="menu.url"
          :key="menu.id"
          >{{ item.title }}</el-menu-item>
      </el-sub-menu> -->

      <!-- </el-menu> -->
      <!-- <el-sub-menu index="1">
              <template #title>
                <el-icon><GoodsFilled /></el-icon>
                <span>商城管理</span>
              </template>
              <el-menu-item index="/menu">菜单管理</el-menu-item>
              <el-menu-item index="22">角色</el-menu-item>
            </el-sub-menu> -->
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
const store = useStore();
</script>

<style scoped>
.el-menu-vertical-demo{
  background-color: #ccc;
}
</style>
